
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
	<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">

	<meta name="description" content=" 		The date range is Today plus 30 days. 		The selection of multiple days is allowed. 		Click any week day to select all the dates that correspond to that week day in the specific date range. 		 			The calendar is refreshed to show the selected week day. 			The first day of week is always Sunday. The user can not change this. 		 		The Submit Days button is used to submit the selected dates. This example just displays an alert box with selected days and refreshes the calendar. 		The Clears Days button clears the multiple days hash and refreshes the calendar. 		The title of the calendar supports custom text that can include html. 		The calendar appears on the page using 'fade' as a show effect. The user can customize the effect speed. ">
	<meta name="keywords" content="dhtml tools,javascript,DHTML Tools,Javascript,ajax,AJAX,Ajax,ajax tools,AJAX Tools,tools controls,simple javascript tools">
	<title>Zapatec DHTML Calendar Widget - Day of Week Selection</title>

	<!-- Common JS files -->
	<script type='text/javascript' src='../../utils/zapatec.js'></script>

	<!-- Custom includes -->	
		<!-- import the calendar script -->
		<script type='text/javascript' src='../../utils/zpdict.js'></script>
		<script type="text/javascript" src="../../utils/lang/zpdate-en.js"></script>
		<script type="text/javascript" src="../../utils/zpdate.js"></script>
		<script type="text/javascript" src="../src/calendar.js"></script>

		<!-- other languages might be available in the lang directory; please check
		your distribution archive. -->


	<!-- ALL demos need these css -->
	<link href="../../website/css/zpcal.css" rel="stylesheet" type="text/css">
	<link href="../../website/css/template.css" rel="stylesheet" type="text/css">
	<style type="text/css">
		body {
			width: 778px;
		}
	</style>

	<!-- Theme css -->
	<link href="../themes/bluexp.css" rel="stylesheet" type="text/css">

	<link rel="SHORTCUT ICON" href="http://www.zapatec.com/website/main/favicon.ico">
	

	<script type="text/javascript" src="../../zpeffects/src/effects.js"></script>
	<script type="text/javascript">
		var warning = "This demo uses the Zapatec AJAX effects. It will only show the effects if you downloaded the full Zapatec AJAX Suite.";
		if (!Zapatec.Effects) {
			alert(warning);
		}
	</script>


</head>
<body>	<div class='zpCalSubHeader' style='text-align:center;'>Day of Week Selection</div>

		<div class='zpCalDemoText'>
			<ul>
				<li>This demo uses the <b>bluexp theme</b>.</li>
				
		<li>The date range is Today plus 30 days.</li>
		<li>The selection of multiple days is allowed.</li>
		<li>Click any week day to select all the dates that correspond to that week day in the specific date range.</li>
		<ul>
			<li>The calendar is refreshed to show the selected week day.</li>
			<li>The first day of week is always Sunday. The user can not change this.</li>
		</ul>
		<li>The Submit Days button is used to submit the selected dates. This example just displays an alert box with selected days and refreshes the calendar.</li>
		<li>The Clears Days button clears the multiple days hash and refreshes the calendar.</li>
		<li>The title of the calendar supports custom text that can include html.</li>
		<li>The calendar appears on the page using 'fade' as a show effect. The user can customize the effect speed.</li>

			</ul>
		</div>


<div align="center">
	<table border="0">
		<tr>
			<td align=center id="calendar-container"></td>
		</tr>
		<tr>
			<td align=center>
				<input type="button" value="Submit Days" onclick="cal_submit_days()"
					title="Button Submit Days can be used to submit the calendar selected dates. This example will just display an alert box with selected days.  The calendar is refreshed.">
				<input type="button" value="Clear Days" onclick="cal_clear_days()"
					title="Button Clears Days will clear the multiple days hash and refresh the view of calendar">
			</td>
		</tr>
	</table>
</div>

<script type="text/javascript">//<![CDATA[
	<!--  to hide script contents from old browsers
	/* Globals */
	var cal;
	// the default multiple dates selected, first time the calendar is instantiated
	var MA = []

	var bDebug=false;
	var bTrace=true;
	/* end Globals */

	// Function to use as a debug trace for alert/confirm message.  Once cancel is clicked
	// the trace stops
	function trace(strMsg)
	{
		if (!bDebug) return
		if (!bTrace) return
		bTrace=confirm(strMsg)
	}

	// This function is called when the user clicked on submit
	function dateChanged(cal) {
		var strDates='Dates Selected:\n';
		// walk the calendar's multiple dates selection hash
		MA = [];
		for (var i in cal.config.multiple) {
			var currentDate = cal.config.multiple[i];
			// sometimes the date is not actually selected, that's why we need to check.
			if (currentDate) {
				// OK, selected.  Fill an input field.  Or something.  Just for example,
				// we will display all selected dates in the element having the id "output".
				MA[MA.length]=currentDate;
			}

		}

		MA.sort(Zapatec.Date.compareDates);

		for (var i in MA) {
			MA[i]=Zapatec.Date.print(MA[i],"%a, %B %d %Y");
			strDates+=MA[i]+'\n';
		}


		alert(strDates);
	}

	// Just show the select days
	function cal_submit_days() {
		cal.submitFlatDates();
		cal_clear_days()
	}

	function init_globals() {
		var i
			Zapatec.Langs[cal.config.langId][cal.langStr]["DAY_FIRST"] = "Select <b>%s</b> days between "
			+ Zapatec.Date.print(dateStart, "<i>%a %b %d %Y</i>") + " and "
			+ Zapatec.Date.print(dateEnd, "<i>%a %b %d %Y</i>") + "."
		MA=[]

		cal.reinit()
	}

	// Clear the selected multiple days
	function cal_clear_days() {
		init_globals()
		cal.config.multiple=[]
		selectedWeekDays = [];
		// Will refressh the view of the calendar
		// Set reinit call date to today
		cal.config.date=new Date()
		cal.reinit()
	}

	/*
	-Set the allowed start and end dates
	-These variables are used for DATE only compares, so zero out time
	*/
	var selectedWeekDays = [];//not to duplicate selected week days
	var dateStart=new Date() // Today
	dateStart.setHours(0,0,0,0)
	var dateEnd=new Date() // Today
	dateEnd.setDate(dateStart.getDate()+30);	// Allow 30 days
	dateEnd.setHours(0,0,0,0)


	// User can NOT change first day of week
  function fdow_set(intDOW, bInit) {
    var i=0
    cal.setFirstDayOfWeek(0); // fdow Always sunday
    if (bInit || selectedWeekDays[intDOW]) return

    // Loop thru start and end dates and select the DOW
    var d=new Date(dateStart)
    d.setHours(0,0,0,0)

    i=0
    var strTrace='Find:dow=' + intDOW + ',' + Zapatec.Date.print(d, "%a, %B %d %Y") + '\n'
    MA = cal.config.multiple;
    while (d <= dateEnd)
    {
      if (d.getDay() == intDOW)
      {
        if (bDebug) strTrace+='Select:' + Zapatec.Date.print(d, "%a, %B %d %Y") + '\n'
        MA[MA.length] = new Date(d);
      }
      d.setDate(d.getDate()+ 1);
      d.setHours(0,0,0,0)
    }

    selectedWeekDays[intDOW] = true;
    if (bDebug) alert(strTrace);
    //alert('You selected ' + intDOW)
    cal.config.date=new Date();
    cal.config.multiple = MA;
    cal.reinit();
  }

	/*
	* Can't choose days after the
	* end date if it is choosen, hilights start and end dates with one style and dates between them with another
	*/
	function dateOutOfRange(date) {
		var dateSelected=new Date(date)
		dateSelected.setHours(0,0,0,0)

		if (dateSelected < dateStart || dateSelected > dateEnd)
			// out of range, not allowed
			return true;

		if (bTrace)
			trace(
				'dateStart.....' + Zapatec.Date.print(dateStart, "%a, %B %d %Y") + '\n' +
				'dateSelect....' + Zapatec.Date.print(dateSelected, "%a, %B %d %Y") +  '\n' +
				'dateEnd.......' + Zapatec.Date.print(dateEnd, "%a, %B %d %Y"))

		return false
	}

	//-->
	</script>

		<script type="text/javascript">
		var cal = new Zapatec.Calendar({
		
		flat         : "calendar-container", // ID of the parent element
		// Call back to submit the dates for FLAT
		// NOTE: If multiple defined then this is NOT called
		flatCallback : dateChanged,
		showOthers   : true,
		numberMonths : 2,
		// pass the initial or computed array of multiple dates to be initially selected
		multiple     : MA,
		sortOrder    : 'desc',
		//the function to call, true to disable, false to enable
		disableFunc  : dateOutOfRange,
		// numeric: 0 to 6.  0 means display Sunday first, 1 means display Monday first, etc.
		firstDay     : 0,

		// Always allow click of dow, regardless if 1st.  This is used so the user can
		// select Sun (first day of week).  If this was false (default) then the first
		// day of week is NOT selectable
		onFDOW        : fdow_set,
 		titleHtml     : "<i>Select</i> Week Days - <a href='http://www.zapatec.com'>Visit Zapatec</a>",

		singleClick: false,

		// NOTE: If week numbers are shown, than selecting first day of week is disabled, therefore turn off weekNumbers
		weekNumbers: false,
		theme        : "bluexp",
		hideEffect      : "slideBottom",
		hideEffectSpeed : 10,
		showEffect      : "fade",
		showEffectSpeed : 10

		});
		
  		// user can NOT change first day of week (fdow), call this function to set fdow
		cal.onFDOW=fdow_set
		// Make sure this is set
		fdow_set(0, true)
		init_globals()

		
	</script>

	<noscript>
		<br/>
		This page uses an <a href='http://www.zapatec.com/website/main/products/suite/'>
		AJAX Component</a> - Zapatec DHTML Calendar Widget, but your browser does not support Javascript.
		<br/>
		<br/>
	</noscript>
		<br/><br/><br/>
		<div class="footer" style='width: 778px; text-align:center; margin-top:2em'>
		&copy; 2004-2009 <strong> <a href='http://www.zapatec.com/'>Zapatec, Inc.</a> </strong>
		</div>
</body>
</html>
